<template>
   
  
  <div id="map" class="mapview" ref="mapView">    <Head style="z-index: 5;" ></Head>
     </div>  
  
     
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
//import apiInterface from '../api/interface' // 引入interface，所有的访问接口
//import { get } from '../api/request' // 引入axios的二次封装
//import latlonData from '../assets/json/latlonData' // 引入axios的二次封装
import { ref, onMounted, inject,defineComponent,defineAsyncComponent   } from 'vue' // vue相关方法

import { Mapbox, GaodeMap } from '@antv/l7-maps';
import { app } from '../main';

import FloatView from './FloatView.vue';

import { timePanelSharedProps } from 'element-plus/es/components/time-picker/src/props/shared'
import { LayerSwitch, Scene, Map, MapTheme } from '@antv/l7';
import { LineLayer, PolygonLayer, Popup, LayerPopup,PointLayer,Fullscreen, MouseLocation,Scale} from '@antv/l7';
import layer from './layer.vue'
import axios from 'axios'
import { ControlEvent, DrawControl } from '@antv/l7-draw';

//import head from './head.vue';
import Head from './head.vue';

import { useRoute } from 'vue-router'

//const dialogVisible = ref(false)

onMounted(async () => {
  //showmap()

  const scene = new Scene({
    id: 'map',
    map: new GaodeMap({
     style: 'grey', // 样式URL
     center: [114.50160434671074, 38.022183410316735],
     pitch: 0,
     zoom: 12,
     type: "amap",
     token: 'cd6d279d0579947bc94018daeed7a44f',
    }),
    logoVisible: false,

  });
const map=new GaodeMap();
map.value=scene.map

 
scene.on('loaded', () => {
   // 实例化并添加插件
   
   scene.initControl()
   const mapTheme = new MapTheme({
     transform: (position) => {
               return position;
         },
         position: 'bottomright',
         style:'height:50px;width:50px;margin-bottom:50px;'
   });
   scene.addControl(mapTheme);
   const a=scene.getMapContainer();
   //console.log(a)
 });



      var park_res = await axios("http://localhost:8080/park")

      var park_layer = new PolygonLayer({
            name: "石家庄公园",
            zIndex: 0,
      });
      park_layer.source(park_res.data)
            .color(
                  '#00ffaa'
            )
            .shape('fill')
            .active(true);
      scene.addLayer(park_layer);

      var road_res = await axios("http://localhost:8080/road")

      var road_layer = new LineLayer({
            name: "三环内道路",
            zIndex: 1,
      }).source(road_res.data)
            // 设置道路宽度
            .size(1)
            .shape('line')
            // 设置颜色
            .color('#1990FF')
            //设置道路流线的效果
            .animate({
                  interval: 1, // 间隔
                  duration: 2, // 持续时间，延时
                  trailLength: 2 // 流线长度
            });

      scene.addLayer(road_layer);


      scene.addImage('hos','/src/assets/定点医院.png')
      
      var hospital_res = await axios("http://localhost:8080/hospital")

      var hospital_layer = new PointLayer({
            name: "石家庄医院",
            zIndex: 0,
      }).source(hospital_res.data)
            // 设置道路宽度
            .size(10)
            .shape( 'hos').color('#f00');

      scene.addLayer(hospital_layer);
      const hosPopup = new LayerPopup({
    items: [
      {
        layer: hospital_layer,
        fields: [
          {
            field: 'name',
            formatField:['名称']
          },
        ],
      },
    ],
    trigger: 'hover',
  });
  scene.addPopup(hosPopup);

  var road_layer2 = new LineLayer({
    name: "实时路况",
    zIndex: 0,
  }).source(road_res.data)
    // 设置道路宽度
    .size(1)
    .shape('line')
    // 设置颜色
    .color('color', (value) => {
      switch (value) {
        case 'darkgreen':
          return '#006400';
        case 'green':
          return '#7FFF00';
        case 'yellow':
          return '#FFD700';
        case 'orange':
          return '#FFA500';
        case 'red':
          return '#FF0000';
      }
    })

   scene.addLayer(road_layer2);


  scene.addImage('train','/src/assets/火车站.png')
  scene.addImage('bus','/src/assets/长途车站.png')
      var station_res = await axios("http://localhost:8080/station")

      var station_layer = new PointLayer({
            name: "石家庄车站",
            zIndex: 0,
      }).source(station_res.data)
            // 设置道路宽度
            .size(10)
            .shape('name', [ 'train', 'bus' ]).color('#ccc');

      scene.addLayer(station_layer);
      const stationPopup = new LayerPopup({
    items: [
      {
        layer: station_layer,
        fields: [
          {
            field: 'name',
            formatField:['名称']
          },
        ],
      },
    ],
    trigger: 'hover',
  });
  scene.addPopup(stationPopup);

  scene.addImage('policy','/src/assets/警徽.png')
      var policy_res = await axios("http://localhost:8080/policy")

      var policy_layer = new PointLayer({
            name: "政府机构",
            zIndex: 0,
      }).source(policy_res.data)
            // 设置道路宽度
            .size(10)
            .shape('policy').color('#eeccaa');

      scene.addLayer(policy_layer);
      const policyPopup = new LayerPopup({
    items: [
      {
        layer: policy_layer,
        fields: [
          {
            field: 'name',
            formatField:['名称']
          },
        ],
      },
    ],
    trigger: 'hover',
  });
  scene.addPopup(policyPopup);

  const a = new LayerSwitch({
            title: "图层目录树",
            btnText: "切换图层",
            layers: [park_layer, hospital_layer,station_layer,policy_layer,road_layer,road_layer2],
            position:'leftcenter',
            style:'margin-bottom:740px;height:40px;z-index:20;',
            popperPlacement:'bottom-start'
      });
      scene.addControl(a);
      const fullscreen = new Fullscreen({
          btnText: '全屏',
          exitBtnText: '退出全屏',
          position: 'leftbottom', 
    });
    scene.addControl(fullscreen)
    const mouseLocation = new MouseLocation({
          transform: (position) => {
                return position;
          },
          position: 'rightbottom',
    });
    scene.addControl(mouseLocation);
    const scale = new Scale({
          transform: (position) => {
                return position;
          },
          position: 'rightbottom',
    });
    scene.addControl(scale);


    app.provide("$scene_map", { scene, map })
    //dialogVisible.value = true

    //const head = () => import("./head.vue");
//
    //new useRoute({
    //  routes: [{ path: "/head", component: head }]
    //});
})








</script>

<style scoped >
.mapview {
  width: 100vw;
  height: 100vh;
  position: relative;
}
</style>
